<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度口 父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题 */

    /* 解决父元素高度坍塌问题的过程，一般叫做清浮动 (清理浮动、清除浮动) */

    /* 
    clear属性是做什么的呢?
口 clear 属性可以指定一个元素是否必须移动清除浮动后)到在它之前的浮动元素下面;
    */
    .content{
        width: 1190px;
        margin: 0 auto;
        background-color: red;
        /* height: 370px; */
    }
    .wrapper{
        margin-right: -10px;
    }
    .item{
        width: 290px;
        background-color: purple;
        margin-bottom: 10px;

        float: left;
        margin-right: 10px;
    }
    .item.left{
        height: 370px;
    }
    .item.right{
        height: 180px;
    }
    .other{
        background-color: orange;
        height: 100px;
    }
    /* 
    clear的常用取值
        口 left: 要求元素的顶部低于之前生成的所有左浮动元素的底部
        口 right: 要求元素的顶部低于之前生成的所有右浮动元素的底部
        口 both:要求元素的顶部低于之前生成的所有浮动元素的底部
        口 none: 默认值，无特殊要求
    */
    /* .line{
        clear:both;
    } */
    /* 最终解决方案 */
    .clear_fix::after{
        content: "";
        clear: both;
        display: block;
        /* 浏览器兼容性 */
        visibility: hidden;
        height: 0; 
    }
    .clear_fix{
        /* IE6/7 */
        *zoom: 1;
    }
</style>
<body>
    <!-- 因为所有的后代item元素都是浮动的。脱离了标准流 -->
    <!-- 不会向父元素汇报高度，那么父元素content元素没有高度 -->
    <div class="content">
        <div class="wrapper clear_fix">
            <div class="item left"></div>
            <div class="item left"></div>
            <div class="item right"></div>
            <div class="item right"></div>
            <div class="item right"></div>
            <div class="item right"></div>
            <div class="item right"></div>
            <div class="item right"></div>
            <div class="item right"></div>
            <div class="item right"></div>
            <div class="item right"></div>
            <div class="item right"></div>
            <div class="item right"></div>
            <div class="item right"></div>
            <div class="line"></div>
        </div>
    </div>
    <!-- other认为content没有高度，那么我直接就会在上面显示 -->
    <div class="other">other</div>
</body>
</html>